iT邦幫忙

2021 iThome 鐵人賽

2
Modern Web

JavaScript 從 50% 開始,打造函式庫不是問題!系列 第 41

JS 41 - 顯示非同步請求的上傳進度條

  • 分享至 

  • xImage
  •  

大家好!

今天要實作非同步請求的上傳進度條。
我們進入今天的主題吧!


程式碼

const xhr = new XMLHttpRequest();
Felix(xhr.upload).on('progress', function (e) {
    if (!e.lengthComputable) return;
    const progress = e.loaded / e.total * 100 + '%';
    Felix('#progress > div').width = progress;
});
xhr.open('POST', 'https://jsonplaceholder.typicode.com/posts');
xhr.setRequestHeader('Content-type', 'application/json; charset=utf-8');
xhr.send(JSON.stringify({ name: 'Felix', date: '2021-10-26' }));

實測

<div id="progress">
    <div></div>
</div>

範例連結製作中。


差不多也到尾聲了。
如果對文章有任何疑問,也歡迎在下方提問和建議!
我是 Felix,我們明天再見!


上一篇
JS 40 - 向下滾動網頁即自動隱藏導覽列
下一篇
JS 42 - 新增或刪除表格式表單的資料列
系列文
JavaScript 從 50% 開始,打造函式庫不是問題!46
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言